import { Graph } from '@antv/x6'
import { px2px } from '@/utils/flexible'

export function installX6Edge() {
  createFlowEdge()
  createGSEdge()
}

export function createFlowEdge() {
  Graph.registerEdge('flow-edge', {
    inherit: 'edge',
    markup: [
      {
        tagName: 'path',
        selector: 'line',
        attrs: {
          fill: 'none',
        },
      },
      {
        tagName: 'circle',
        selector: 'circle',
      },
    ],
    attrs: {
      line: {
        connection: true,
        sourceMarker: null, // 实心箭头
        targetMarker: null,
        stroke: '#3155ce',
        strokeLinejoin: 'round',
        strokeWidth: 4,
      },
      circle: {
        r: 7,
        atConnectionRatio: 0,
        fill: 'transparent',
      },
    },
  })
}

export function createGSEdge() {
  Graph.registerEdge('gs-edge', {
    inherit: 'edge',
    markup: [
      {
        tagName: 'path',
        selector: 'line',
        attrs: {
          fill: 'none',
        },
      },
      {
        tagName: 'circle',
        selector: 'circle',
      },
      {
        tagName: 'text',
        selector: 'label',
      },
      {
        tagName: 'text',
        selector: 'label1',
      },
    ],
    attrs: {
      line: {
        connection: true,
        sourceMarker: null, // 实心箭头
        targetMarker: null,
        stroke: '#3155ce',
        strokeLinejoin: 'round',
        strokeWidth: px2px(2),
      },
      circle: {
        r: px2px(4),
        atConnectionRatio: 0,
        fill: 'transparent',
      },
      label: {
        textPath: { selector: 'line', startOffset: '50%' },
        textAnchor: 'middle',
        textVerticalAnchor: 'middle',
        fill: '#3281F6',
        text: 'label',
        fontWeight: 'bold',
        fontSize: px2px(16),
      },
      label1: {
        textPath: { selector: 'line', startOffset: '50%' },
        textAnchor: 'middle',
        textVerticalAnchor: 'middle',
        fill: '#3281F6',
        text: '',
        fontWeight: 'bold',
        fontSize: px2px(16),
      },
    },
  })
}
